<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .header {
            margin-left: auto;
            height: 50px;
            width: 470px;
            background: white;
        }

        .header-a1 {
            line-height: 50px;
            font-size: 13px;
            display: inline-block;
            margin-left: 15px;
            font-weight: 800;
            color: black;
        }

        .header-a2 {
            line-height: 50px;
            font-size: 12px;
            display: inline-block;
            margin-left: 15px;
        }

        .header-top {
            height: 25px;
            width: 60px;
            background-color: rgb(51, 136, 255);
            float: right;
            margin-top: 12.5px;
            font-size: 14px;
            line-height: 25px;
            text-align: center;
            color: white;
        }

        .div1 {
            height: 753px;
            width: 76px;
            background-color: rgb(240, 240, 240);
            position: relative;
            right: 8px;
            top: -61px;
            display: none;
            /* opacity:0.8; */
        }

        .header-top:hover .div1 {
            display: block;
        }

        .div2 {
            height: 25px;
            width: 60px;
            background-color: rgb(240, 240, 240);
            position: absolute;
            top: 20.5px;
            right: 8px;
            color: black;
            font-size: 14px;
            line-height: 25px;
            text-align: center;
            margin-bottom: 50px;

        }

        .top-div {
            background-color: rgb(240, 240, 240);
            height: 50px;
            width: 45px;
            position: relative;
            top: 65.5px;
            left: 15.5px;
            margin-top: 15.5px;
        }

        .photo {
            width: 45px;
            height: 36px;
        }

        .header-top .a1 {
            font-size: 8px;
            position: relative;
            top: -13px;
            color: black;
            text-align: center;
            text-decoration: none;
        }

        .a2 {
            position: relative;
            top: 75px;
            font-size: 8px;

            text-align: center;

        }

        .top-div a:hover {
            text-decoration: 1px solid black;
        }

        .a123 {
            text-align: center;
        }

        .mainphoto {
            width: 230px;
            height: 85px;
            position: relative;
            top: 85px;
        }

        .b123 {
            text-align: center;
            position: relative;
            top: 100px;
            background-color: white;
            height: 35px;
            width: 650px;
            margin: auto;
            border: 1px solid rgb(71, 145, 255);
        }

        .b123 input {
            height: 33px;
            width: 500px;
            position: relative;
            border: none;
        }

        .middle {
            height: 35px;
            width: 100px;
            float: right;
            background-color: rgb(71, 145, 255);
            text-align: center;
            line-height: 35px;
            color: white;
            position: relative;
            right: -2px;
        }

        .middle1 {
            float: right;
            width: 50px;
            position: relative;
            top: 5px;
        }
        .two-code{
            height: 250px;
            background-color: white;
            position: relative;
            top: 275px;
            text-align: center;
            
        }
        .two-code img{
            width: 120px;
            height: 120px;
        }
        .two-code a{
            color: rgb(150, 150, 150);
        }
        .final img{
            width: 15px;
            height: 15px;

        }
    </style>
</head>

<body>
    <div class="header">
        <a href="" class="header-a1">新闻</a>
        <a href="" class="header-a1">hao123</a>
        <a href="" class="header-a1">地图</a>
        <a href="" class="header-a1">视频</a>
        <a href="" class="header-a1">贴吧</a>
        <a href="" class="header-a1">学术</a>
        <a href="" class="header-a2">登录</a>
        <a href="" class="header-a2">设置</a>
        <div class="header-top">
            更多产品
            <div class="div1">
                <div class="div2">
                    更多产品
                </div>
                <div class="top-div top1">
                    <a href=""><img src="./1.png" alt="11" class="photo"></a>
                    <a href="" class="a1">百度营销</a>
                </div>
                <div class="top-div top2">
                    <a href=""><img src="./2.png" alt="" class="photo"></a>
                    <a href="" class="a1">音乐</a>
                </div>
                <div class="top-div top3">
                    <a href=""> <img src="./3.png" alt="" class="photo"></a>
                    <a href="" class="a1">图片</a>
                </div>
                <div class="top-div top4">
                    <a href=""> <img src="./4.png" alt="" class="photo"></a>
                    <a href="" class="a1">知道</a>

                </div>
                <div class="top-div top5">
                    <a href=""> <img src="./5.png" alt="" class="photo"></a>
                    <a href="" class="a1">文库</a>
                </div>
                <div class="top-div top6">
                    <a href=""><img src="./6.png" alt="" class=photo></a>
                    <a href="" class="a1">风云榜</a>

                </div>
                <a href="" class="a2">全部产品-&gt;&gt;</a>




            </div>

        </div>
    </div>
    <div class="a123" <a href=""><img src="./BPH3)9AYKJF_7SLE_M`NE7B.png" alt="" class="mainphoto"></a>
    </div>
    <div class="b123">
        <input type="text">

        <a href="">
            <div class="middle">
                百度一下
            </div>
        </a>

        <a href="">
            <div class="middle1">
                <img src="./P9JY~V%_9P5Z7X[%RO{G6`1.png" alt="">
            </div>
        </a>
    </div>
    <div class="two-code">
        <img src="./7.png" alt="">
        <p style="letter-spacing: 2px;position: relative;top: -15px;">下载百度APP</p>
        <p style="color: rgb(150, 150, 150);font-size: 13px;position: relative;top: -30px;"> 有事搜一搜&nbsp;&nbsp;没事看一看</p>
        <p style="color: rgb(150, 150, 150);position: relative;top: -40px;font-size: 12px;">
            <a href="">把百度设为主页</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href=""></a>关于百度</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="">About&nbsp;&nbsp;Baidu</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a href=""">百度推广</a>&nbsp;&nbsp;&nbsp;&nbsp;
            (京)-经营性-2017-0020
        </p>
        <p class="final"style="color: rgb(150, 150, 150);position: relative;top: -40px;font-size: 12px;">
             ©2020 Baidu
            <a href="" >使用百度前必读</a>
            <a href="" >意见反馈</a>
            <img src="./a.png" alt="">
            京ICP证030173号 
            <img src="./b.png" alt="">
        </p>
    </div>


</body>

</html>